<template>

    <div class="profileBox">
        <div class="name">
            {{ modelData.model.name }}
        </div>
        <div class="info">
            <span>HIGHT/{{ modelData.model.height }}</span>
            <span>BWH/{{ modelData.model.bwh }}</span>
            <span>HAIR/{{ modelData.model.hair }}</span>
            <span>EYES/{{ modelData.model.eyes }}</span>
            <span>SHOES/{{ modelData.model.shoes }}</span>
        </div>
        <div>
            <a href="javascript:;">
                Portfolio
            </a>
        </div>
    </div>

    <div class="bodyBox">
        <div class="pictureBox" v-for="item in modelData.images">
            <div class="image">
                <img :src="item.imageUrl" alt="">
            </div>
        </div>
    </div>

</template>

<script setup>
import { searchModelInfoAPI } from '@/apis/user';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

// 设置所有 .pictureBox 元素的高度
document.querySelectorAll('.bodyBox > .pictureBox').forEach(item => {
    item.style.height = `${Math.floor(Math.random() * 200) + 100}px`;
});

const calcRows = () => {
    const masonry = document.querySelector('.bodyBox');
    const items = masonry.querySelectorAll('.pictureBox');
    const cols = getComputedStyle(masonry).gridTemplateColumns.split(" ").length;

    items.forEach((item, index) => {
        // 计算上下间距
        const verticalGap = index % cols === 0 ? 0 : 20; // 每列的第一个元素不需要上方间隙
        const totalHeight = item.clientHeight + verticalGap;

        // 计算元素需要占据多少行
        const rows = Math.ceil(totalHeight / 2);

        // 应用样式
        item.style.gridRowEnd = `span ${rows}`;
    });
};

// 添加事件监听器
window.addEventListener('resize', calcRows);
window.addEventListener('load', calcRows);

onMounted(() => {
    calcRows()
})

const modelData = ref({
    "model": {
        "id": 1,
        "name": "YAROSLAV",
        "headImage": "无",
        "sex": 1,
        "height": "180CM",
        "bwh": "90-66-92",
        "hair": "Black",
        "eyes": "Brown",
        "shoes": "42"
    },
    "images": [
        {
            "id": 1,
            "modelId": 1,
            "imageUrl": "1----"
        },
        {
            "id": 2,
            "modelId": 1,
            "imageUrl": "1-2"
        },
        {
            "id": 3,
            "modelId": 1,
            "imageUrl": "1-3"
        }
    ]
})

const route = useRoute()

const getModelProfile = async () => {
    const res = await searchModelInfoAPI(route.params.id)

    if (res.data.code === 200) {
        console.log(res.data.data)
        modelData.value = res.data.data
    }
    else {
        ElMessage.error(res.data.message)
    }
}

onMounted(() => {
    getModelProfile()
})
</script>

<style lang="scss" scoped>
@media (min-width: 1280px) and (max-width: 1920px) {
    .bodyBox {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 0 60px !important;

        .pictureBox {
            margin-bottom: 40px !important;
        }
    }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .bodyBox {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 0 30px !important;

        .pictureBox {
            margin-bottom: 30px !important;
        }
    }
}

@media (max-width: 768px) {
    .bodyBox {
        grid-template-columns: repeat(1, 1fr) !important;
        grid-gap: 0px 20px !important;

        .pictureBox {
            margin-bottom: 20px !important;
        }
    }

    .info {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


.profileBox {
    margin-top: 145px;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;

    .name {
        // margin-top: 35px;
        text-align: center;
        color: #000000;
        font-size: 35px;
    }

    .info {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 30px;
        color: #666666;
        font-size: 16px;

        padding: 20px;
        box-sizing: border-box;
    }

    div>a {
        cursor: pointer;
        display: block;
        transition: all .4s;
        margin: 0 15px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        padding: 0 20px;
        font-size: 16px;

        margin-top: 40px;
        text-decoration: none;
        color: #2e2923;
        border-color: #2e2923;
        border: 1px solid #2e2923;
    }

}

.bodyBox {
    margin-top: 35px;
    width: 100%;
    max-width: 1300px;
    min-height: calc(100vh - 160px);
    margin: 35px auto 60px;

    // display: flex;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    grid-gap: 0 75px;
    // grid-auto-rows: 5px;

    padding: 0 30px;
    box-sizing: border-box;

    .pictureBox {

        display: flex;
        flex-direction: column;
        overflow: hidden;
        // margin:0;

        .image {
            overflow: hidden;
            position: relative;

            &:hover {

                cursor: pointer;

                img {
                    transform: scale(1.2);
                }

                .zhezhao {
                    opacity: 1;
                }
            }
        }



        img {
            width: 100%;
            transition: all .4s;
            overflow: hidden;
        }

        .name {
            background-color: #f1f1f1;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            color: #333333;
        }
    }



}
</style>